<template>
  <div id="user">
    <div class="top">
      <van-image round width="6rem" height="6rem" :src="avatar" />
      <div class="right" @click="loginFn">
        <h3>{{USER_NAME}}</h3>
        <span>&gt;</span>
      </div>
    </div>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="(item,i) in arr"
        :key="i"
        :icon="item.icon"
        :text="item.text"
        @click="btn"
      />
    </van-grid>
    <div class="log_box" v-if="showbg">
      <div class="log_bg" @click="logbg"></div>
      <div class="log_content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
 
<script>
import { Login } from "../request/api";
let avatar = require("@/assets/avatar.png");
export default {
  data() {
    return {
      avatar,
      username: "",
      password: "",
      USER_NAME:"点击登录",
      showbg: false,
      arr: [
        {
          icon: "label-o",
          text: "我的订单",
        },
        {
          icon: "bill-o",
          text: "优惠券",
        },
        {
          icon: "goods-collect-o",
          text: "礼品卡",
        },
        {
          icon: "location-o",
          text: "我的收藏",
        },
        {
          icon: "flag-o",
          text: "我的足迹",
        },
        {
          icon: "contact",
          text: "会员福利",
        },
        {
          icon: "aim",
          text: "地址管理",
        },
        {
          icon: "warn-o",
          text: "账号安全",
        },
        {
          icon: "service-o",
          text: "联系客服",
        },
        {
          icon: "question-o",
          text: "帮助中心",
        },
        {
          icon: "smile-comment-o",
          text: "意见反馈",
        },
      ],
    };
  },
  methods: {
    onSubmit(val) {
      let username = val["用户名"];
      let pwd = val["密码"];
      Login({ username, pwd }).then((res) => {
        console.log(res);
        if (res.errno == 0) {
          this.$toast("登录成功");
          this.showbg =false;
          localStorage.setItem("token",res.data.token);
          localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo));
          window.location.reload();
        } else {
          this.$toast("用户名和密码错误");
        }
      });
    },
    loginFn() {
      localStorage.getItem("token")?"":this.showbg = true;
    },
    btn() {
      this.$toast("该模块尚未开放");
    },
    logbg() {
      this.showbg = false;
    },
  },
  created() {
    let userInfo = localStorage.getItem("userInfo");
    if(userInfo){
      this.avatar = JSON.parse(userInfo).avatar;
      this.USER_NAME = JSON.parse(userInfo).username;
    }
  },
};
</script>
 
<style lang = "less" scoped>
#user{padding-bottom: 50px;}
.top {
  padding: 30px 2%;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    padding: 0 10px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
  }
}
.log_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  .log_bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .log_content {
    width: 90%;
    height: 200px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
}
/deep/.van-grid-item__content {
  border: 1px solid #e4e4e4;
  width: 125px;
  height: 125px;
}
</style>